<template>
  <section class="main">

    <a-card style="margin-top: 24px" :bordered="false" title="人体成分分析">
      <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="date"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="recordPhoto" slot-scope="text, record">
            <div style="display: flex; justify-content: space-around; flex-wrap: wrap;" v-if="record.recordPhoto">
              <div
                style="
                  position: relative;
                  padding: 8px;
                  border: 1px solid #d9d9d9;
                  border-radius: 4px;
                "
              >
                <img style="width: 80px; height: 80px;" :src="record.recordPhoto" :preview="record.recordPhoto" />
              </div>
            </div>
            <div v-else></div>
          </template>
          <template slot="bodyValue" slot-scope="text, record">
            <div class="body-data">
              <p>身高：{{record.height}}cm</p>
              <p>体重：{{record.weight}}kg</p>
              <p>肌肉：{{record.muscle}}kg</p>
              <p>体脂百分比：{{record.bodyFat}}%</p>
              <p>骨质：{{record.bone}}kg</p>
              <p>骨骼肌：{{record.skeletalMuscle}}kg</p>
              <p>体质指数（BMI）：{{record.bmi}}</p>
              <p>腰臀比：{{record.whr}}%</p>
              <p>蛋白质：{{record.protein}}</p>
              <p>脂肪：{{record.fat}}</p>
              <p>无机盐：{{record.inorganicSalt}}</p>
              <p>基础代谢（BMR）：{{record.bmr}}kcal</p>
            </div>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a-button style="margin-right: 20px;" @click="handleEdit(record)"> 编辑 </a-button>
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.dataId)">
                <a-button>删除</a-button>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <body-modal ref="modalForm" @ok="modalFormOk"></body-modal>

    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import BodyModal from './modules/BodyModal'
import { deleteAction } from '@/api/manage'


const listColumns = [
  {
    title: '检测日期',
    align: 'center',
    dataIndex: 'recordDate',
    width: 200
  },
  {
    title: '数据',
    align: 'center',
    dataIndex: 'bodyValue',
    scopedSlots: { customRender: 'bodyValue' }
  },
  {
    title: '报告',
    align: 'center',
    dataIndex: 'recordPhoto',
    scopedSlots: { customRender: 'recordPhoto' }
  },
  {
    title: '操作',
    width: 250,
    align: 'center',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  name: 'Body',
  mixins: [BloodProfileMixin],
  components: { BodyModal },
  data() {
    return {
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },
      listColumns,
      url: {
        // 按日期分组获取患者人体成分分析记录
        getList: '/record/signin/body/page'
      }
    }
  },
  methods: {
    handleEdit(record) {
      let data = JSON.parse(JSON.stringify(record))
      this.$refs.modalForm.add(data)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    handleDelete(id) {
      deleteAction('/record/signin/body/delete', { id }).then((res) => {
        if (res.success) {
          this.$message.success('操作成功')
          this.getList()
        } else {
          that.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
.body-data{
  p {
    margin-bottom: 3px;
  }
}
</style>

